<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue-router</title>
  </head>
  <body>
      <pre>
          动态路由匹配第三种
          第二中不能使用id，只能使用props:{name:'name',age:'1000'}这个对象
      </pre>
      <!-- 2：//创建vue挂载区 -->
      <div id="app">
          <!--3： 创建路由组件 -->
          <router-link to='/test'>Model5</router-link>
          <!--4：创建路由占位符 -->
          <router-view></router-view>
      </div>

      <!-- 1：引入vue vue-router -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>
    //7： 创建路由组件
    const  Model5={
        props:['name','age'],
        template:`
        <div>
           {{name}} <h2>这是Model5 {{age}}</h2>
            </div>
        `
    }
    //6： 创建路由规则
const luyou=new VueRouter({
    routes:[{path:'/test',component:Model5,props:{name:'这是name',age:'188'}}]
})
    // 5：实例化vue
const vm=new Vue({
    el:'#app',
    data:{},
    router:luyou
})
    </script>
</html>
